import { Ref, useRef } from 'react';
import { Button, Row, Col, Input, Form, Spin, message, Select } from 'antd';
import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import pageStyles from '@/common/pageLayout.less';
import { onCloseModalCommon } from '@/utils';
import { useDictionary } from '../common/useDictionary';
import { cancelServices } from '../services/UpdateService';
import { NeedUpdateAPI } from '../common/type';

/**
 * @UpdateCancelModal 管理页作废弹窗
 * @param form 作废表单实例
 * @param onSubmit 作废表单提交事件
 * @param onClose 作废作废表单
 * @returns
 */
const UpdateCancelModal: React.FC<NeedUpdateAPI.IUpdateCancelModal> = ({ form, onSubmit, onClose, needInfo }) => {
  // 作废表单实例
  const [cancelForm] = Form.useForm();

  const cancelCallback = (res: Record<string, any>) => {
    if (res?.msgFlag) {
      message?.success(res?.msg);
      onCloseModalCommon(cancelModalRef);
      onSubmit();
    }
  };

  const { cancelRun, cancelLoading } = cancelServices(cancelCallback);

  const prefixCls = 'need-update';

  const { cancelTypeList } = useDictionary();

  const cancelModalRef: Ref<IOneModalRef> = useRef(null);

  /**
   * @onSave 保存事件
   */
  const onSave = async () => {
    cancelForm?.validateFields()?.then((res) => {
      cancelRun({
        id: needInfo?.id,
        versionNum: needInfo?.versionNum,
        ...res,
      });
    });
  };

  // 底部按钮
  const footerRender = () => {
    return (
      <>
        <Button onClick={() => onCloseModalCommon(cancelModalRef)}>取消</Button>
        <Button type={'primary'} onClick={onSave}>
          确认
        </Button>
      </>
    );
  };

  return (
    <OneModal
      open={true}
      getContainer={false}
      ref={cancelModalRef}
      title={'作废需求'}
      className={'certificate-info-modal'}
      width={550}
      onCancel={() => {
        onClose({ isShow: false, resObj: null });
      }}
      footer={footerRender()}
      // bodyStyle={{ padding: '5px 0px' }}
      centered
      confirmLoading={cancelLoading}
    >
      <Spin spinning={cancelLoading}>
        <div className={pageStyles['fromView-styles']}>
          <Row gutter={8} className={`${prefixCls}row`}>
            <Col span={24} className={`${prefixCls}row-col`}>
              <Form form={cancelForm}>
                <Form.Item
                  label="作废类型"
                  name="cancelType"
                  rules={[
                    {
                      required: true,
                      message: '请选择作废类型',
                    },
                  ]}
                >
                  {/* ======演示注释====== 【暂时注释,字典无作废类型】*/}
                  <Select
                    placeholder="请选择作废类型"
                    options={cancelTypeList}
                    fieldNames={{
                      label: 'name',
                      value: 'value',
                    }}
                  />
                  {/* <Input /> */}
                </Form.Item>
                <Form.Item label="作废原因" name="cancelReason" rules={[{ required: true, message: '请输入作废原因' }]}>
                  <Input.TextArea placeholder="请输入作废原因" showCount maxLength={200} autoSize={{ minRows: 2, maxRows: 4 }} />
                </Form.Item>
              </Form>
            </Col>
          </Row>
        </div>
      </Spin>
    </OneModal>
  );
};

export default UpdateCancelModal;
